<template>
  <div class="sport-login">
    <div class="sport-login-container">
      <!-- 标题 -->
      <div class="sport-login-title">
        <span class="span1">2025全国大学生</span>
        <span class="span2">创新竞赛</span>
      </div>

      <!--副标题 -->
      <div class="sport-login-subtitle">
        探索无限可能，激发创新思维，展现你的才华与创意！
      </div>
      <!-- 中间表单登录 -->
      <div class="sport-login-form">
        <!-- 左右布局 -->
        <div class="sport-login-form-left">
          <!--  -->
          <div class="div1">创新成就未来</div>
          <div class="div2">
            加入我们的竞赛，挑战自我，展现你的创新能力和团队协作精神！
          </div>
          <img class="float-animation" src="../../assets//images/sportlogin.jpg" alt="" />
          <!-- 列表 -->
          <div class="div3">
            <div class="div3-item">
              <div class="div-item-icon">
                <el-icon><QuestionFilled /></el-icon>
              </div>
              <div class="div-item-title">
                <span class="span3">激发创意</span>
                <span class="span4">突破传统思维，激发无限创意</span>
              </div>
            </div>
            <div class="div3-item">
              <div class="div-item-icon">
                <el-icon><UserFilled /></el-icon>
              </div>
              <div class="div-item-title">
                <span class="span3">团队协作</span>
                <span class="span4">与优秀的人合作，共同成长</span>
              </div>
            </div>
            <div class="div3-item">
              <div class="div-item-icon">
                <el-icon><Promotion /></el-icon>
              </div>
              <div class="div-item-title">
                <span class="span3">职业发展</span>
                <span class="span4">获得企业认可，开启职业新篇章</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 用户报名 -->
        <div class="sport-login-form-right" v-if="isLogin === 1">
          <div class="sport-login-form-right-title">填写报名信息</div>
          <div class="sport-login-form-right-form">
            <el-form
              ref="ruleFormRef"
              :model="loginForm"
              :rules="rules"
              hide-required-asterisk
              label-position="top"
            >
              <el-form-item label="用户名" prop="username" class="el-form-item">
                <el-input
                  class="form-input-focus el-input"
                  v-model="loginForm.username"
                  placeholder="请输入用户名"
                ></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password" class="el-form-item">
                <el-input
                  class="form-input-focus el-input"
                  v-model="loginForm.password"
                  placeholder="请输入密码"
                ></el-input>
              </el-form-item>
              <el-form-item label="验证码" prop="captcha" class="el-form-item">
                <el-input
                  class="form-input-focus el-input"
                  v-model="loginForm.captcha"
                  placeholder="请输入验证码"
                >
                  <template #append>
                    <img
                      :src="captchaUrl"
                      @click="refreshCaptcha"
                      style="cursor: pointer; height: 50px; min-width: 120px"
                    />
                  </template>
                </el-input>
              </el-form-item>
            </el-form>
            <div class="sport-register" @click="goRegister">用户注册</div>
          </div>
          <div class="btn-pulse" @click="goLogin">
            <el-icon><Key /></el-icon>
            <span style="margin-left: 10px"> 登录</span>
          </div>
        </div>
        <!-- 用户注册 -->
        <div class="sport-login-form-right" v-if="isLogin === 2">
          <div class="sport-login-form-right-title">填写注册信息</div>
          <div class="sport-login-form-right-form">
            <el-form
              ref="ruleFormRegisterRef"
              :model="loginFormRegister"
              :rules="rulesRegister"
              hide-required-asterisk
              label-position="top"
            >
              <el-form-item label="邮箱" prop="email" class="el-form-item">
                <el-input
                  class="form-input-focus el-input"
                  v-model="loginFormRegister.email"
                  placeholder="请输入邮箱"
                ></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password" class="el-form-item">
                <el-input
                  class="form-input-focus el-input"
                  v-model="loginFormRegister.password"
                  placeholder="请输入密码"
                ></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="passwordSet" class="el-form-item">
                <el-input
                  class="form-input-focus el-input"
                  v-model="loginFormRegister.passwordSet"
                  placeholder="请确认密码"
                ></el-input>
              </el-form-item>
              <el-form-item label="验证码" prop="captcha" class="el-form-item">
                <el-input
                  class="form-input-focus el-input"
                  v-model="loginFormRegister.captcha"
                  placeholder="请输入验证码"
                >
                  <template #append>
                    <el-button
                      :disabled="isCounting"
                      style="color: #165dff"
                      @click="getCaptcha"
                    >
                      {{ codeText }}</el-button
                    >
                  </template>
                </el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="btn-pulse" @click="registerLogin">
            <el-icon><Key /></el-icon>
            <span style="margin-left: 10px"> 注册</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useI18n } from "vue-i18n";
import { useRoute, useRouter } from "vue-router";
import { Promotion, QuestionFilled, UserFilled, Key } from "@element-plus/icons-vue";
const router = useRouter();
const route = useRoute();
const { t } = useI18n();
const isLogin = ref(1);

// 登录表单
const loginForm = ref({
  username: "张万路",
  password: "123456Aa",
  captcha: "6073",
});

const isCounting = ref(false); // 是否正在倒计时
const countdownTime = ref(120); // 倒计时时间（秒）
const codeText = ref("获取验证码"); // 按钮文本
const getCaptcha = () => {
  if (!isCounting.value) {
    isCounting.value = true;
    const timer = setInterval(() => {
      countdownTime.value--;
      if (countdownTime.value < 0) {
        clearInterval(timer);
        isCounting.value = false;
        codeText.value = "获取验证码";
        countdownTime.value = 60; // 重置时间
      } else {
        codeText.value = `${countdownTime.value}秒后重新获取`;
      }
    }, 1000);
    // 此处可添加调用后端获取验证码的实际接口逻辑
    console.log("触发获取验证码操作（模拟）");
  }
};

const ruleFormRef = ref(null);
const ruleFormRegisterRef = ref(null);

//登录校验
const rules = ref({
  username: [
    {
      required: true,
      message: "请输入用户名",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
  ],
  captcha: [
    {
      required: true,
      message: "请输入验证码",
      trigger: "blur",
    },
  ],
});

//注册校验
const rulesRegister = ref({
  email: [
    {
      required: true,
      message: "请输入邮箱",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "blur",
    },
  ],
  passwordSet: [
    {
      required: true,
      message: "请确认密码",
      trigger: "blur",
    },
  ],
  captcha: [
    {
      required: true,
      message: "请输入验证码",
      trigger: "blur",
    },
  ],
});

const captchaUrl = ref("/captcha?timestamp=" + new Date().getTime()); // 假设后端接口
// 刷新验证码
const refreshCaptcha = () => {
  captchaUrl.value = `/captcha?timestamp=${new Date().getTime()}`; // 刷新图片避免缓存
};

//登录
const goLogin = () => {
  // 存相关的身份信息
  // router.push('')
  console.log("登录", loginForm.value);
  //跳转到首页
  router.push("/talentRecruitment");
};
//注册
const goRegister = () => {
  isLogin.value = 2;
};
const loginFormRegister = ref({
  email: "123456789@qq.com",
  password: "123456Aa",
  passwordSet: "123456Aa",
  captcha: "6073",
});
//注册接口
const registerLogin = () => {
  console.log("注册", loginFormRegister.value);
  isLogin.value = 1;
};
</script>
<style lang="scss" scoped>
.sport-register {
  color: #165dff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 15px;
  text-align: right;
}
.form-input-focus {
  transition: all 0.2s ease;
  height: 50px;
}

.el-form-item {
  margin-bottom: 20px;
  margin-top: 10px;
}

:deep(.el-form-item__error) {
  margin-top: 1px;
}
//样式穿透的写法
:deep(.el-input__wrapper) {
  background-color: #edf2fa; //不生效
  box-shadow: 0 0 0 1px #dcdfe6 inset;
  border-radius: 4px 0px 0px 4px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
// :deep(.el-input__wrapper) {
//   background-color: red;
// }
:deep(.el-input-group__append) {
  background-color: #edf2fa; //不生效
  min-width: 120px;
  padding: 0px;
}
.btn-pulse {
  animation: pulse 2s infinite;
  padding: 12px 16px;
  border-radius: 8px;
  background-color: #165dff;
  color: #fff;
  font-size: 16px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-top: 100px;
  // animation-delay: 1.8s;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(22, 93, 255, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(22, 93, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(22, 93, 255, 0);
  }
}

.sport-login {
  background: linear-gradient(135deg, #299de2 0%, #deecf7 100%);
  // background-image: url(../../assets/images/sportbgc.png);
  // background-size: cover;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  width: 100%;
  height: 100%;
}

.sport-login::before,
.sport-login::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: -1;
}

.sport-login::before {
  width: 400px;
  height: 400px;
  background: rgba(22, 93, 255, 0.1);
  top: -150px;
  right: -200px;
  animation: float 15s linear infinite;
}

.sport-login::after {
  width: 300px;
  height: 300px;
  background: rgba(54, 207, 201, 0.1);
  bottom: -100px;
  left: -150px;
  animation: float 20s linear -5s infinite;
}

.sport-login-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease-out forwards 0.2s;
}

.sport-login-title {
  width: 100%;
  height: 90px;
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  line-height: 100px;
  letter-spacing: 3px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease-out forwards 0.4s;
}

.sport-login-subtitle {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #6b7280;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease-out forwards 0.6s;
}

.sport-login-form {
  width: 1000px;
  height: 650px;
  margin-top: 4%;
  border-radius: 10px;
  display: flex;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease-out forwards 0.8s;
  // 适配移动端
  // max-width: 100%; // 最大宽度自适应
  // padding: 20px; // 添加内边距
  // flex-direction: column; // 移动端上下排列
}

.sport-login-form-left {
  width: 400px;
  background: linear-gradient(135deg, #165dff 0%, #36cfc9 100%);
  border-radius: 10px 0 0 10px;
  padding: 25px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease-out forwards 0.8s;
}

.sport-login-form-left .div1 {
  color: #fff;
  font-size: 24px;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease-out forwards 1s;
}

.sport-login-form-left .div2 {
  color: #ffffffcc;
  font-size: 16px;
  text-align: center;
  margin-bottom: 10px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease-out forwards 1.2s;
}

.float-animation {
  object-fit: cover;
  border-radius: 10px;
  width: 350px;
  margin-top: 20px;
  animation: floatImg 6s ease-in-out infinite;
}
@keyframes floatImg {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0px);
  }
}

.sport-login-form-left .div3 {
  display: flex;
  flex-direction: column;
  margin-top: 15px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease-out forwards 1.6s;
}

.sport-login-form-left .div3-item {
  margin-bottom: 10px;
  height: 50px;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateX(-20px);
  animation: fadeInLeft 0.6s ease-out forwards;
}

.sport-login-form-left .div3-item:nth-child(1) {
  animation-delay: 1.6s;
}
.sport-login-form-left .div3-item:nth-child(2) {
  animation-delay: 1.8s;
}
.sport-login-form-left .div3-item:nth-child(3) {
  animation-delay: 2s;
}

.sport-login-form-right {
  width: 600px;
  border: 1px solid #46a0f9;
  border-radius: 0 10px 10px 0;
  padding: 25px;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease-out forwards 1s;
}

.sport-login-form-right-title {
  width: 100%;
  margin-top: 10px;
  text-align: left;
  font-size: 24px;
  font-weight: 700;
  color: #1d2129;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease-out forwards 1.2s;
  margin-bottom: 30px;
}

.sport-login-form-right-form .el-form-item {
  opacity: 0;
  transform: translateX(20px);
  animation: fadeInRight 0.6s ease-out forwards;
}

.sport-login-form-right-form .el-form-item:nth-child(1) {
  animation-delay: 1.2s;
}
.sport-login-form-right-form .el-form-item:nth-child(2) {
  animation-delay: 1.4s;
}
.sport-login-form-right-form .el-form-item:nth-child(3) {
  animation-delay: 1.6s;
}
.sport-login-form-right-form .el-form-item:nth-child(4) {
  animation-delay: 1.8s;
}

// .btn-pulse {
//   opacity: 0;
//   transform: translateY(20px);
//   animation: fadeInUp 1s ease-out forwards 2s;
// }

@keyframes float {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-50px) rotate(180deg);
  }
  100% {
    transform: translateY(0) rotate(360deg);
  }
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.span1 {
  color: #1d2129;
}
.span2 {
  color: #165dff;
}
.div-item-icon {
  height: 46px;
  width: 46px;
  border-radius: 50%;
  background-color: rgb(255 255 255 / 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
}
.div-item-title {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}
.div-item-title .span3 {
  color: #fff;
  font-size: 16px;
  margin-bottom: 5px;
}
.div-item-title .span4 {
  color: #ffffffcc;
  font-size: 14px;
}

// 媒体查询：移动端样式（屏幕宽度 ≤ 768px）
/* 移动端适配（屏幕宽度 ≤ 768px） */
@media (max-width: 768px) {
  .sport-login {
    min-height: 100vh; // 确保页面至少占满屏幕高度
    display: flex;
    flex-direction: column;
  }
  .sport-login-container {
    flex: 1; // 自动填充剩余空间
    display: flex;
    flex-direction: column;
    box-sizing: border-box; // 包含内边距在宽度内
    padding: 50px 12px 20px 12px;
  }
  .sport-login-form {
    width: 100%;
    max-width: 100%; // 确保不超出屏幕
    display: block;
    margin-top: 20px; // 减少顶部间距
    flex: 1; // 自动填充剩余空间
    overflow-y: auto; // 内容超出时启用垂直滚动
    -webkit-overflow-scrolling: touch; // 增强移动设备滚动体验
    padding: 0; // 移除内边距，避免双重内边距
  }
  .sport-login-form-left {
    width: 100%; // 宽度占满
    border-radius: 10px; // 统一圆角
    margin-bottom: 15px; // 底部间距
    padding: 15px; // 适当调整内边距
  }
  .sport-login-form-right {
    width: 100%; // 宽度占满
    border-radius: 10px; // 统一圆角
    border: 1px solid #46a0f9;
    padding: 15px; // 适当调整内边距
  }
  .sport-login-title {
    font-size: 28px; // 缩小标题字体
    height: auto;
    line-height: normal;
  }
  .sport-login-subtitle {
    font-size: 16px; // 缩小副标题字体
  }
  .sport-login-form-right-title {
    font-size: 20px; // 缩小表单标题字体
  }
  .btn-pulse {
    margin-top: 20px; // 调整按钮间距
  }
  .float-animation {
    width: 100%; // 图片宽度占满
  }
}
</style>
